<script setup lang='ts'>
const jiezhi = ref('')

const data = ref([
  {
    name: '防火墙',
    num: '10',
    type: '资源',
    person: '丁国香',
    desc: '防火墙/10 , 用于拓展业务，...',
    deadline: '2024-10-10',
  },
  {
    name: '云网络',
    num: '2',
    type: '硬件',
    person: '龙俊凯,宋北其',
    desc: '云网络/2，用于拓展业务，...',
    deadline: '2024-10-10',
  },
  {
    name: '云主机',
    num: '2',
    type: '云平台',
    person: '龙俊凯,宋北其',
    desc: '云主机/2，用于拓展业务，...',
    deadline: '2024-10-10',
  },
])

const visible = defineModel<boolean>()
const isEdit = ref(false)
function deleteItem(row, i) {
  if (i === data.value.length - 1) {
    data.value.pop()
    isEdit.value = false
  }
  else {
    data.value.splice(i, 1)
  }
}
function add() {
  isEdit.value = true
  data.value.push({
    name: '',
    num: '',
    desc: '',
    deadline: '',
  })
}

function isLastEdit(i) {
  return isEdit.value && i === data.value.length - 1
}
</script>

<template>
  <el-dialog v-model="visible" title="发起外采" width="1000" :before-close="() => visible = false">
    <div flex-between-center>
      <el-form-item label="指定截止时间">
        <el-date-picker
          v-model="jiezhi"
          type="datetime"
          placeholder="Select date and time"
        />
      </el-form-item>
      <el-button type="primary" mb1 @click="add">
        添加
      </el-button>
    </div>

    <BaseTable :data="data">
      <el-table-column prop="type" label="采购类型">
        <template #default="{ row, $index }">
          <el-select v-if="isLastEdit($index)" v-model="row.desc" placeholder="">
            <el-option label="资源" value="1" />
            <el-option label="硬件" value="2" />
            <el-option label="云平台" value="3" />
          </el-select>
          <span v-else>{{ row.type }} </span>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="采购说明">
        <template #default="{ row, $index }">
          <el-input v-if="isLastEdit($index)" type="textarea" placeholder="备注品名/数量等额外信息" />
          <span v-else>{{ row.desc }} </span>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="指定人员">
        <template #default="{ row, $index }">
          <el-select v-if="isLastEdit($index)" v-model="row.desc" placeholder="">
            <el-option label="王五" value="默认" />
            <el-option label="王六" value="云专线" />
          </el-select>
          <span v-else>{{ row.person }} </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template #default="{ row, $index }">
          <el-button v-if="isLastEdit($index)" type="primary" @click="isEdit = false">
            确定
          </el-button>
          <el-button type="danger" @click="deleteItem(row, $index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </BaseTable>
    <template #footer>
      <span>
        <el-button @click=" visible = false">取消</el-button>
        <el-button type="primary" @click="visible = false">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang='scss'></style>
